import { Album } from "@/faker/album/albums";
import { Box, Flex, Icon, Image, Text } from "@chakra-ui/react";
import { memo, useState } from "react";
import CoverWithImage from "../coverWithImage";
import { TriangleUpIcon } from "@chakra-ui/icons";
import { useNavigate } from "react-router-dom";
interface IProps {
    albums: Album[];
    onHandleClick: (id: number) => void;
    isSquare?: boolean;
}

const AlbumItem = ({ album, onHandleClick,isSquare }: { album: Album;  isSquare:boolean ;onHandleClick: (id: number) => void }) => {
    const [isActive, setIsActive] = useState(false);
    const navigate = useNavigate()
    return (
        <Flex
            flexDirection="column"
            // flexBasis="calc(20% - 16px)"
            minWidth="200px"
             flex="1"
            onClick={() => { }}
            onMouseEnter={() => setIsActive(true)}
            onMouseLeave={() => setIsActive(false)}
        >
            <Box w="100%"  
               
            position="relative" cursor="pointer"
                aspectRatio={isSquare ? "1/1" : "16/9"}
                h={isSquare ? "100%" : "auto"}
                onClick={() => { navigate(`/album-detail/${album.id}`) }}
                overflow="hidden"
                >
                <Image
                    src={album.picUrl}
                    alt={album.name}
                    position="absolute"
                    top="0"
                    left="0"
                    w="100%"
                    h="100%"
                    transform={isActive ? "scale(1.15)" : "scale(1)"}
                    transition="all 0.3s ease-in-out"
                />
                <CoverWithImage isActive={isActive} >
                    <Icon as={TriangleUpIcon} 
                    onClick={(e) => { 
                        e.stopPropagation()
                        onHandleClick(album.id) }}
                    transform="rotate(90deg) translate(-50%,-50%)" 
                        position="absolute"
                        w="50px"
                        h="50px"
                        top="50%"
                        left="-10%"
                    />
                </CoverWithImage>
            </Box>
            <Text _hover={{ fontWeight: "bold" }} cursor="pointer" mt={2}>{album.name}</Text>
        </Flex>
    );
};

const SongsAlbums = ({ albums, onHandleClick ,isSquare=true}: IProps) => {
    return (
        <Flex
            mt={8}
            flexWrap="wrap"
            gap={4}
            justifyContent="flex-start"
        >
            {albums.map((album) => (
                <AlbumItem isSquare={isSquare}  key={album.id} album={album} onHandleClick={onHandleClick} />
            ))}
        </Flex>
    );
};

export default memo(SongsAlbums);
